<template>
  <div class="home-page">
    <div class="home-page-top">
      <div class="home-page-top-left">
        <a-avatar :size="40" :src="avatar"></a-avatar>
        <div class="home-page-top-left-text">您好，欢迎进入系统！</div>
      </div>
    </div>
    <draggable
      :list="state.list"
      ghost-class="ghost"
      chosen-class="chosenClass"
      animation="300"
      @start="onStart"
      @end="onEnd"
      class="list"
    >
      <template #item="{ element }">
        <div class="block">
          <div class="block-title">{{ element.title }}</div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import draggable from 'vuedraggable'
import avatar from '@/assets/me.png'

/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({
  //需要拖拽的数据，拖拽后数据的顺序也会变化
  list: [
    { title: '通知', id: 0 },
    { title: '2', id: 1 },
    { title: '3', id: 2 },
    { title: '4', id: 3 },
    { title: '5', id: 4 },
    { title: '6', id: 5 }
  ]
})

//拖拽开始的事件
const onStart = () => {
  console.log('开始拖拽')
}

//拖拽结束的事件
const onEnd = () => {
  console.log('结束拖拽')
}
</script>

<style scoped lang="scss">
.home-page {
  width: 100%;
  height: 100%;
  .home-page-top {
    height: 50px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--theme-color);
    padding: 0 10px 0 20px;
    .home-page-top-left {
      height: 100%;
      display: flex;
      align-items: center;
      .home-page-top-left-text {
        margin-left: 10px;
        color: #fff;
      }
    }
  }
  .list {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow-y: auto;
    .block {
      width: 33%;
      height: calc(50% - 10px);
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px #ccc;
      border-radius: 10px;
      margin-bottom: 10px;
      .block-title {
        height: 30px;
        width: 100%;
        padding: 0 10px;
        line-height: 30px;
        background: var(--theme-color);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #fff;
      }
    }
  }
  .list::-webkit-scrollbar {
    display: none;
  }
}
</style>